<template>
  <div class="cesium-container" id="cesiumContainer" @click="getPosition">
    <div class="title">
      <Title />
    </div>
    <div class="left-container">
      <LeftContainer />
    </div>
    <div class="bottom-btn">
      <a-tooltip title="回到中心点">
        <a-button
          type="primary"
          shape="circle"
          size="large"
          @click="gotoCenter"
        >
          <template #icon><aimOutlined /></template>
        </a-button>
      </a-tooltip>
    </div>
  </div>
</template>

<script setup>
import Title from "@/components/title.vue";
import LeftContainer from "@/components/leftContainer.vue";
import { initCesium } from "./methods/initCesium";

import { AimOutlined } from "@ant-design/icons-vue";
import { cesiumConfig } from "@/config/config";

import { initGeo } from "./methods/initLayer";

import { onMounted } from "vue";
let viewer = null;
onMounted(async () => {
  viewer = initCesium();
  await initGeo("xm_shoppoint", viewer);
  await initGeo("xm_lrdl", viewer);
  await initGeo("xm_building", viewer);

  viewer.camera.flyTo({
    ...cesiumConfig.position,
    duration: 5,
  });
});

const getPosition = () => {
  // console.log("position", viewer.camera.position);
  // console.log("heading", viewer.camera.heading);
  // console.log("pitch", viewer.camera.pitch);
  // console.log("roll", viewer.camera.roll);
};

const gotoCenter = () => {
  viewer.camera.flyTo({
    ...cesiumConfig.position,
  });
};
</script>

<style scoped>
.cesium-container {
  height: 100%;
  width: 100%;
  position: relative;
}
.title {
  position: absolute;
  height: 10vh;
  width: 100vw;
  top: 0;
  color: white;
  z-index: 1;
  background-color: rgba(8, 18, 23, 0.6);
}
.left-container {
  position: absolute;
  height: 90vh;
  width: 20vw;
  top: 10vh;
  z-index: 1;
  background-color: rgba(8, 18, 23, 0.6);
}
.bottom-btn {
  position: absolute;
  z-index: 1;
  bottom: 1vh;
  right: 1vw;
}
::v-deep .cesium-infoBox {
  z-index: 2;
  top: 11vh;
  right: 1vh;
  background-color: rgba(8, 18, 23, 0.6);
}
::v-deep .cesium-infoBox-title {
  background-color: rgba(8, 18, 23, 0.6);
}
</style>